<template>
  <view class="course-materials" :style="showAllMaterials ? 'border-bottom: 1px solid #e5e5e5;' : ''">
    <view class="materials-header">
      <text class="header-title">课程资料</text>
      <view class="more-btn" @click="jumpMore" v-if="showAllMaterials">更多 &gt;</view>
    </view>
    <view v-if="shownMaterials.length > 0" class="materials-list">
      <view
          class="material-item"
          v-for="(material, index) in shownMaterials"
          :key="index"
          hover-class="material-item-hover"
      >
        <image :src="IMAGE_CONFIG.shu" class="material-icon" />
        <text class="material-name" :title="material.title">{{ material.title }}</text>
        <view class="download-btn" @click="downloadMaterial(material)">
          <image :src="IMAGE_CONFIG.xiaZai" class="download-icon" />
          <text class="download-tip">下载</text>
        </view>
      </view>
    </view>
    <view v-else class="text-ccc">暂时还没有资料哦~</view>
    <u-popup :show="privateMessages" @close="close" :round="20">
      <view class="qr-popup-content">
        <view class="qr-popup-header">
          <text class="qr-popup-title">下载资料二维码</text>
          <text class="qr-popup-close" @click="close">×</text>
        </view>
        <view class="qr-popup-filename-row" v-if="currentMaterial">
          <image :src="IMAGE_CONFIG.shu" class="qr-popup-fileicon" />
          <text class="qr-popup-filename" :title="currentMaterial.title">{{ currentMaterial.title }}</text>
        </view>
        <view class="qr-popup-img-wrap">
          <!-- 点击图片触发预览 -->
          <image
            v-if="codeImg"
            :src="codeImg"
            class="qr-popup-img"
            mode="aspectFit"
            :show-menu-by-longpress="true"
          />
        </view>
        <view class="qr-popup-divider" />
        <text v-if="codeImg" class="qr-popup-tip">
          用微信或浏览器扫码下载资料
        </text>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {IMAGE_CONFIG} from '@/utils/imageConfig'
import {strToBase64Api} from "../../api/order";

export default {
  name: "information",
  props: ['shownMaterials', 'showAllMaterials', 'masterProductId'],
  data() {
    return {
      IMAGE_CONFIG: IMAGE_CONFIG.index,
      codeImg: '', // 原始Base64数据
      qrLocalPath: '', // 转换后的本地临时路径
      privateMessages: false,
      currentMaterial: null,
    }
  },
  methods: {
    close() {
      this.privateMessages = false;
      this.qrLocalPath = ''; // 关闭时清空本地路径
    },
    jumpMore() {
      uni.navigateTo({
        url: '/pages/discover/courseDetails/moreInformation?id=' + this.masterProductId
      })
    },
    // 下载资料并生成二维码
    downloadMaterial(material) {
      this.currentMaterial = material;
      strToBase64Api({
        height: '300',
        text: material.fileUrl,
        width: '300'
      }).then(res => {
        this.codeImg = res.data.code;
        this.privateMessages = true; // 显示弹窗
        // 将Base64转换为本地临时文件
        // this.convertBase64ToLocal(this.codeImg);
      });
    },
  }
}
</script>

<style scoped lang="scss">
/* 原有样式保持不变 */
// 定义颜色变量
$text-color: #333;
$text-light-color: #666;
$text-lighter-color: #999;

// 定义尺寸变量
$spacing: 10px;
$icon-size: 22px;

// 定义混合器
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin padding-size {
  padding: 15px;
}

.course-materials {
  @include padding-size;

  .materials-header {
    @include flex-center;
    justify-content: space-between;
    margin-bottom: $spacing;

    .header-title {
      font-size: 18px;
      color: $text-color;
    }

    .more-btn {
      color: $text-light-color;
      cursor: pointer;
      font-size: 14px;
      padding: 2px 8px;
      border-radius: 8px;
      transition: background 0.2s;

      &:active {
        background: #f5f5f5;
      }
    }
  }

  .materials-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .material-item {
    display: flex;
    align-items: center;
    background: #fafbfc;
    border-radius: 8px;
    padding: 12px 14px;
    transition: box-shadow 0.2s;
    position: relative;

    &-hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      background: #f5f7fa;
    }

    .material-icon {
      width: $icon-size;
      height: $icon-size;
      margin-right: 12px;
    }

    .material-name {
      flex: 1;
      font-size: 15px;
      color: $text-color;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .download-btn {
      display: flex;
      align-items: center;
      cursor: pointer;
      margin-left: 10px;
      position: relative;

      .download-icon {
        width: $icon-size;
        height: $icon-size;
      }

      .download-tip {
        font-size: 12px;
        color: #888;
        margin-left: 4px;
        display: none;
      }

      &:hover .download-tip {
        display: inline;
      }
    }
  }

  .text-ccc {
    color: #CCC;
    text-align: center;
    width: 90%;
    display: block;
    margin: auto;
    padding: 24px 0 12px 0;
    font-size: 15px;
  }
}

.qr-popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 24px 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.qr-popup-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.qr-popup-close {
  font-size: 22px;
  color: #bbb;
  cursor: pointer;
  font-weight: bold;
  margin-left: 10px;
  transition: color 0.2s;
}

.qr-popup-close:active {
  color: #888;
}

.qr-popup-filename-row {
  display: flex;
  align-items: center;
  margin: 10px 0 8px 0;
  width: 100%;
}

.qr-popup-fileicon {
  width: 18px;
  height: 18px;
  margin-right: 6px;
}

.qr-popup-filename {
  font-size: 14px;
  color: #444;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qr-popup-img-wrap {
  background: #fff;
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.qr-popup-img {
  width: 140px;
  height: 140px;
  border-radius: 8px;
  background: #fff;
}
</style>